<template>
  <div>
    <t-tabs
      class="tr-tabs-level1"
      :staticItems="[
        {
          label: '一级标签',
          code: '111',
        },
        {
          label: 'tr-tabs-level1',
          code: '222',
        },
      ]"
      tabPosition="top"
      type="none"
      fillMode="fixedHeight"
      height="150px"
      :visible="true"
      fillMarginBottom="10px"
      :hideTabLabel="false"
      tabindex="2"
      style="margin-top: 20px"
      v-model="index"
      @onChange="onChange"
    >
      <t-tab-panel name="111"
        ><div style="padding: 20px">添加class:tr-tabs-level1</div></t-tab-panel
      >
      <t-tab-panel name="222"
        ><div style="padding: 20px">添加class:tr-tabs-level1</div></t-tab-panel
      >
    </t-tabs>

    <t-tabs
      class="tr-tabs-level2"
      :staticItems="[
        {
          label: '二级标签',
          code: '111',
        },
        {
          label: 'tr-tabs-level2',
          code: '222',
        },
      ]"
      tabPosition="top"
      type="none"
      fillMode="fixedHeight"
      height="150px"
      :visible="true"
      fillMarginBottom="10px"
      :hideTabLabel="false"
      tabindex="2"
      style="margin-top: 20px"
      v-model="index"
      @onChange="onChange"
    >
      <t-tab-panel name="111"
        ><div style="padding: 20px">添加class:tr-tabs-level2</div></t-tab-panel
      >
      <t-tab-panel name="222"
        ><div style="padding: 20px">添加class:tr-tabs-level2</div></t-tab-panel
      >
    </t-tabs>

    <t-tabs
      class="tr-tabs-level3"
      :staticItems="[
        {
          label: '三级标签',
          code: '111',
        },
        {
          label: 'tr-tabs-level3',
          code: '222',
        },
      ]"
      tabPosition="top"
      type="none"
      fillMode="fixedHeight"
      height="150px"
      :visible="true"
      fillMarginBottom="10px"
      :hideTabLabel="false"
      tabindex="2"
      style="margin-top: 20px"
      v-model="index"
      @onChange="onChange"
    >
      <t-tab-panel name="111"
        ><div style="padding: 20px">添加class:tr-tabs-level3</div></t-tab-panel
      >
      <t-tab-panel name="222"
        ><div style="padding: 20px">添加class:tr-tabs-level3</div></t-tab-panel
      >
    </t-tabs>
  </div>
</template>

<script setup>
import { computed, onMounted, ref, nextTick } from 'vue';
const index = ref(1);
</script>

<style lang="scss" scoped></style>
